<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/userCenter' }">个人中心</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/order' }">订单</el-breadcrumb-item>
                <el-breadcrumb-item>订单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="line">
            <img :src="$global.Image.icon_goods_line" />
        </div>
        <div class="order-detail">
            <div class="inform">
                <div class="line-ti">
                    <div class="border1-name">基本信息</div>

                </div>
                <div class="border1" v-if="orderDetail.delivery_record.length != 0">
                    <div class="border1-name">发货信息</div>
                    <div class="good-express" v-for="(item,index) in orderDetail.delivery_record" :key="index">
                        <div class="top-info">
                            <div>{{item.create_time}}</div>
                            <div>备注：</div>
                        </div>
                        <div class="bottom-info">
                            <div>{{item.express.name}} · {{item.courier}}</div>
                            <div> {{item.goods_name}} 数量：{{item.num}} 已发货 </div>
                            <div class="find-express" @click="findExpress(item.id)">查询物流</div>
                        </div>
                    </div>

                </div>
                <div class="border1">
                    <div class="border1-name">收货人信息</div>
                    <div class="good-express">
                        <div class="top-info">
                            <div style="width:0"></div>
                            <div>{{orderDetail.user_address}} ({{orderDetail.real_name}} 收 {{orderDetail.user_phone}})</div>
                        </div>
                    </div>
                    <div style="height:35px"></div>
                    <div class="border1-name">配送方式</div>
                    <div class="good-express express-type">
                        <div class="top-info">
                            <div style="width:0"></div>
                            <div class="">{{orderDetail.send_type == 0?'尽快发货':'统一发货'}}</div>
                        </div>
                    </div>
                    <div style="height:35px" v-if="orderDetail.sys_mark"></div>
                    <div class="border1-name" v-if="orderDetail.sys_mark">后台备注</div>
                    <div class="good-express" v-if="orderDetail.sys_mark">
                        <div class="top-info">
                            <div style="width:0"></div>
                            <div>{{orderDetail.sys_mark}}</div>
                        </div>
                    </div>
                    
                </div>
            </div>
            <div style="height:20px"></div>
            <div class="line-ti">
                <div>商品信息</div>
            </div>
            <div class="bill">
                <div class="bill-itm">
                    <div class="bill-left">订单名称：</div>
                    <span class="bill-right border1">{{orderDetail.order_name}}</span>
                            </div>
                            <div class="bill-itm">
                                <div class="bill-left">订单编号：</div>
                                <div class="bill-right">{{orderDetail.order_id}}</div>
                            </div>
                            <div class="bill-itm">
                                <div class="bill-left">采购商品件数：</div>
                                <div class="bill-right">{{orderDetail.total_num}}</div>
                            </div>
                            <div class="bill-itm">
                                <div class="bill-left">采购单总金额：</div>
                                <div class="bill-right">{{orderDetail.total_price}}</div>
                            </div>

                        </div>
                        <div class="cart-top td-fss">
                            <div class="cart-td1">商品</div>
                            <div class="cart-td2">规格</div>
                            <div class="cart-td2">单价</div>
                            <div class="cart-td3">数量</div>
                            <div class="cart-td4">小计</div>
                        </div>
                        <ul class="cart-list">
                            <li class="td-fss" v-for="(item, index) in orderDetail.cartInfo" :key="index">
                                <div class="cart-td1 td-fsc">
                                    <img class="goods-img" :src="
                item.productInfo.attrInfo
                  ? item.productInfo.attrInfo.image
                  : item.productInfo.image
              " @click="$router.push({ path: '/detail/' + item.product_id })" />
                                    <div class="td-f1 goods-info" @click="$router.push({ path: '/detail/' + item.product_id })">
                                        <div class="name">{{ item.productInfo.store_name }}</div>
                                        <div class="price">￥{{ item.truePrice }}</div>
                                    </div>
                                </div>
                                <div class="cart-td2 td-fcc" v-if="item.productInfo.attrInfo">
                                    <span class="goods-attr">{{ item.productInfo.attrInfo.suk }}</span>
                                </div>
                                <div class="cart-td2 td-fbc" v-else>
                                    <span class="goods-attr">无</span>
                                </div>
                                <div class="cart-td2 td-fbc" style="text-align:center">
                                    <div class="goods-attr" style="width:100%;color:#333">{{item.productInfo.price}}</div>
                                </div>
                                <div class="cart-td3 td-fcc">
                                    <span class="goods-attr">{{ item.cart_num }}</span>
                                </div>
                                <div class="cart-td4 td-fcc">
                                    <span class="amount">¥{{ item.truePrice * item.cart_num }}</span>
                                </div>
                            </li>
                        </ul>

                        <div class="inform-order" v-if="orderDetail.mark">
                            <div>订单备注</div>
                            <textarea placeholder="请输入" disabled v-model="orderDetail.mark"></textarea>
                        </div>
                        <div style="height:20px"></div>
                        <div class="border1" v-if="orderDetail.delivery_record.length != 0">
                            <div class="border1-name">发货信息</div>
                            <div class="good-express" v-for="(item,index) in orderDetail.delivery_record" :key="index">
                                <div class="top-info">
                                    <div>发货时间：</div>
                                    <div>{{item.create_time}}</div>
                                </div>
                                <div class="bottom-info">
                                    <div>快递单号：</div>
                                    <div>{{item.express.name}} · {{item.courier}} </div>
                                </div>
                            </div>

                        </div>
                        <div class="pay">
                            <div @click="$router.go(-1)">返回</div>
                        </div>
                        <!-- <div class="btn-choose">
                <div class="succ" @click="$refs.approveChoose.showDialog = true">通过并提交</div>
                <div class="succ-pay" @click="$refs.payOrder.showDialog = true">通过并支付</div>
                <div class="fail">驳回</div>
            </div> -->
                    </div>
                    <el-dialog title="物流信息" :visible.sync="dialogVisible" width="30%">
                        <el-tag>{{expressList.expName}} · {{expressList.number}}</el-tag>
                        <div style="height:30px"></div>
                        <el-timeline :reverse="reverse">
                            <el-timeline-item v-for="(activity, index) in expressList.list" :key="index" :timestamp="activity.time">
                                {{activity.status}}
                            </el-timeline-item>
                        </el-timeline>
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
</template>

<script>
import {
    postOrderConfirm,
    postOrderComputed,
    createOrder,
    orderDetail,
    expressFind,
} from "@api/order";
import { getAddressList } from "../../api/user";
import { getUser } from "@api/user";
import { mapGetters } from "vuex";
import { checkNumber } from "../../utils";

export default {
    data() {
        return {
            cartId: "",
            goodsList: [],
            addressList: [],
            dialogVisible: false,
            addressInfo: {},
            showMoreAddress: false,
            expressList: {},
            shipping_type: 1,
            usableCoupon: {},
            useIntegral: false,
            integralVal: "",
            mark: "",
            orderDetail: {
                delivery_record: [],
            },
            orderPrice: {
                pay_price: "计算中",
            },
            userInfo: {},
            debounce: "",
            contacts: "",
            contactsTel: "",
            pinkId: 0,
            from: "frompc",
        };
    },
    watch: {
        integralVal(val) {
            this.debounce && clearInterval(this.debounce);
            this.debounce = setTimeout(() => {
                if (!checkNumber(val)) {
                    this.$dialog.error("输入金额格式不正确");
                } else if (val > parseFloat(this.userInfo.integral)) {
                    this.$dialog.error("积分不足");
                    this.integralVal = this.userInfo.integral;
                } else {
                    this.changeIntegral();
                }
            }, 500);
        },
        useIntegral() {
            this.changeIntegral();
        },
    },
    created() {},
    mounted() {
        if (this.$route.params.id !== undefined) {
            this.cartId = this.$route.params.id;
        }
        this.getGoodsList();
        this.getUserInfo();
    },
    methods: {
        findExpress(id) {
            let data = {
                delivery_record: id,
            };
            expressFind(data)
                .then((res) => {
                    console.log(res);
                    this.expressList = res.data.express.result;
                    this.dialogVisible = true;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 获取订单详情
        getGoodsList() {
            orderDetail(this.cartId)
                .then((res) => {
                    console.log(res);
                    this.orderDetail = res.data;
                })
                .catch(() => {
                    // this.$dialog.toast({
                    //     mes: "加载订单数据失败",
                    //     timeout: 1500,
                    //     icon: "error",
                    //     callback: () => {
                    //         this.$router.go(-1);
                    //     },
                    // });
                });
        },
        // 获取个人信息
        getUserInfo() {
            getUser()
                .then((res) => {
                    this.userInfo = res.data;
                })
                .catch(() => {});
        },
    },
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.order-detail {
    width: 1200px;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: 60px;
    .border2 {
        margin-top: 24px;
        width: 100%;
        border: 1px solid #eaa090;
        padding: 27px 20px;
        box-sizing: border-box;
        .approves {
            display: flex;
            width: 660px;
            height: 50px;
            padding: 0 22px;
            box-sizing: border-box;
            justify-content: space-between;
            border: 1px solid #eaa090;
            .approves-left {
                font-size: 15px;
                color: #333333;
                display: flex;
                align-items: center;
                span {
                    width: 6px;
                    height: 6px;
                    background: #adb8e7;
                    margin-right: 10px;
                    border-radius: 100%;
                    display: block;
                }
            }
            .approves-right {
                font-size: 15px;
                font-weight: bold;
                color: #333333;
                display: flex;
                align-items: center;
                span {
                    margin-left: 10px;
                    font-size: 15px;
                    display: block;
                    font-weight: bold;
                    color: #fa311a;
                }
            }
        }
    }
    .border1 {
        width: 100%;
        border: 1px solid #dbdbdb;
        display: block !important;
        padding: 20px 30px;
        box-sizing: border-box;
        .border1-name {
            font-size: 18px;
            font-weight: bold;
            text-align: left;
            color: #da213d;
            line-height: 18px;
            padding-left: 0 !important;
        }
        .express-type {
            width: 190px !important;
            padding: 0 0 15px !important;
            text-align: center;
            .top-info {
                justify-content: center;
            }
        }
        .good-express {
            margin-top: 20px;
            width: 1020px;
            // height: 100px;
            border: 1px solid #eaa090;
            border-radius: 5px;
            padding: 0 37px 20px;
            box-sizing: border-box;
            .top-info {
                display: flex;
                margin-top: 20px;
                color: #333;
                font-size: 16px;
                font-weight: bold;
                .express-type {
                    width: 190px;
                }
                div {
                    &:nth-child(1) {
                        width: 270px;
                    }
                    &:nth-child(2) {
                    }
                }
            }
            .bottom-info {
                font-weight: bold;
                display: flex;
                margin-top: 20px;
                color: #333;
                align-items: center;
                font-size: 16px;
                div {
                    &:nth-child(1) {
                        width: 270px;
                    }
                    &:nth-child(2) {
                    }
                }
                .find-express {
                    border: 1px solid #d3d3d3;
                    width: 100px;
                    height: 30px;
                    border-radius: 30px;
                    font-size: 16px;
                    cursor: pointer;
                    color: #b3b3b3;
                    text-align: center;
                    line-height: 30px;
                    margin: 0 auto;
                }
            }
        }
    }
    .line-ti {
        width: 100%;
        border-bottom: 1px solid #dbdbdb;
        > div {
            color: #da213d;
            font-size: 18px;
            // border-bottom: 3px solid $color;
            // width: 112px;
            line-height: 36px;
            font-weight: bold;
            position: relative;
            &::before {
                position: absolute;
                bottom: 0;
                left: 0;
                content: "";
                width: 72px;
                height: 3px;
                background: #da213d;
            }
        }
    }
    .detail-top {
        background: #f3f3f3;
        margin: 12px 0 24px 0;
        ul {
            display: flex;
            height: 46px;
            width: 100%;
            align-items: center;
            li {
                list-style-type: none;
                font-size: 14px;
                color: #999999;
                width: 240px;
                text-align: center;
            }
            > li:nth-of-type(1) {
                width: 480px;
                padding-left: 79px;
                text-align: left;
                display: block;
            }
            > li:nth-of-type(2) {
                width: 240px;
            }
            > li:nth-of-type(4) {
                width: 240px;
            }
        }
    }
    .details-in {
        width: 100%;
        height: 149px;
        border: 1px solid #dbdbdb;
        display: flex;
        align-items: center;
        > div {
            height: 149px;
        }
        > div:nth-of-type(1) {
            width: 480px;
            display: flex;
            height: 149px;
            align-items: center;
            input {
                margin: 0 16px 0 12px;
            }
            img {
                width: 100px;
                height: 100px;
            }
            > div {
                margin-left: 16px;
                > div:nth-of-type(1) {
                    color: #333333;
                    font-size: 14px;
                }
                > div:nth-of-type(2) {
                    font-size: 13px;
                    margin-top: 18px;
                }
            }
        }
        > div:nth-of-type(2) {
            width: 240px;
            font-size: 14px;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-left: 79px;
        }
        > div:nth-of-type(3) {
            width: 240px;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
            cursor: pointer;
            > div:nth-of-type(1) {
                background: #f3f3f3;
                width: 32px;
                height: 32px;
                font-size: 24px;
                color: #666666;
                border: 1px solid #f3f3f3;
            }
            > div:nth-of-type(2) {
                width: 60px;
                height: 32px;
                line-height: 32px;
                font-size: 19px;
                border: 1px solid rgba(203, 203, 203, 1);
            }
            > div:nth-of-type(3) {
                background: #f3f3f3;
                width: 32px;
                height: 32px;
                font-size: 24px;
                color: #666666;
                border: 1px solid #f3f3f3;
            }
        }
        > div:nth-of-type(4) {
            width: 240px;
            font-size: 16px;
            color: $color;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .approve {
        margin-top: 40px;
        ul {
            width: 100%;
            // border: 1px solid #dbdbdb;
            min-height: 240px;
            margin-bottom: 40px;
            .addAddr {
                width: 110px;
                height: 34px;
                background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
                border-radius: 5px;
                font-size: 14px;
                text-align: center;
                color: #ffffff;
                line-height: 34px;
                margin-left: 30px;
                margin-top: 30px;
            }
            li {
                width: 620px;
                height: 46px;
                margin-top: 20px;
                font-size: 16px;
                border: 1px solid #eaa090;
                border-radius: 5px;
                color: #333;
                .li-info-name {
                    margin: 0 55px 0 30px;
                    font-size: 18px;
                    width: 90px;
                    font-weight: bold;
                    color: #da213d;
                    line-height: 46px;
                }
                div {
                    margin-left: 20px;
                }
                img {
                    display: block;
                    width: 20px;
                    height: 20px;
                }
                .edit-box {
                    // display: none;
                    justify-content: flex-end;
                    flex: 1;
                    // margin-right: 8px;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                    }
                    .span1 {
                        width: 40px;
                        height: 20px;
                        background: linear-gradient(
                            143deg,
                            #da213d 23%,
                            #da213d 90%
                        );
                        border-radius: 2px;
                        line-height: 20px;
                        font-size: 18px;
                        font-weight: bold;
                        margin-right: 30px;
                        font-size: 13px;
                        text-align: center;
                        color: #ffffff;
                    }
                    .span2 {
                        font-size: 18px;
                        font-weight: bold;
                        color: #3ca9d7;
                        margin-right: 30px;
                    }
                    .span3 {
                        font-size: 14px;
                        color: #014a97;
                        margin-right: 35px;
                        position: relative;
                        &::before {
                            position: absolute;
                            left: -35px;
                            top: 0;
                            bottom: 0;
                            margin: auto 0;
                            width: 1px;
                            height: 20px;
                            background: #eaa090;
                            content: "";
                        }
                    }
                }
            }
            li:hover .edit-box {
                display: flex;
            }
            li.select {
                color: #333333;
                font-weight: bold;
                background: #fbf7f7;
                border: 1px solid #eaa090;
            }
        }
    }
    .inform {
        ul {
            width: 100%;
            border: 1px solid #dbdbdb;
            min-height: 240px;
            margin-bottom: 20px;
            .addAddr {
                width: 110px;
                height: 34px;
                background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
                border-radius: 5px;
                font-size: 14px;
                text-align: center;
                color: #ffffff;
                line-height: 34px;
                margin-left: 30px;
                margin-top: 30px;
            }
            li {
                height: 46px;
                font-size: 16px;
                border: 1px solid #ffffff;
                color: #333;
                .li-info-name {
                    margin: 0 55px 0 30px;
                    font-size: 18px;
                    width: 90px;
                    font-weight: bold;
                    color: #da213d;
                    line-height: 46px;
                }
                div {
                    margin-left: 20px;
                }
                img {
                    display: block;
                    width: 20px;
                    height: 20px;
                }
                .edit-box {
                    // display: none;
                    justify-content: flex-end;
                    flex: 1;
                    margin-right: 8px;
                    img {
                        width: 16px;
                        height: 16px;
                        margin-right: 5px;
                    }
                    .span1 {
                        font-size: 18px;
                        font-weight: bold;
                        color: #fa321b;
                        margin-right: 30px;
                    }
                    .span2 {
                        font-size: 18px;
                        font-weight: bold;
                        color: #3ca9d7;
                        margin-right: 30px;
                    }
                    .span3 {
                        font-size: 14px;
                        color: #014a97;
                        margin-right: 30px;
                    }
                }
            }
            li:hover .edit-box {
                display: flex;
            }
            li.select {
                color: #333333;
                font-weight: bold;
                background: #fbf7f7;
                border: 1px solid #eaa090;
            }
        }
        input {
            margin-left: 10px;
        }
        > div:nth-of-type(1) {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
            margin: 40px 0 32px 0;
        }
        > div:nth-of-type(2) {
            display: flex;
            align-items: center;
            font-size: 18px;
            > div:nth-of-type(1) {
                padding: 0 20px 0 32px;
            }
            > div:nth-of-type(2) {
                padding-right: 49px;
            }
            > div:nth-of-type(3) {
                color: #666666;
                font-size: 14px;
            }
        }
        > div:nth-of-type(3) {
            margin-top: 22px;
            font-size: 16px;
            color: #666666;
        }
    }
    .line {
        width: 100%;
        border: 1px dashed #c1c1c1;
        margin: 22px 0 29px 0;
    }
    .bill {
        margin-top: 30px;
        width: 1199px;
        // height: 176px;
        border: 1px solid #eaa090;
        padding: 10px 0;
        box-sizing: border-box;
        .bill-itm {
            padding: 10px 0;
            display: flex;
            align-items: center;
            .bill-left {
                width: 150px;
                font-size: 14px;
                font-weight: bold;
                text-align: right;
                color: #333333;
            }
            .bill-right {
                position: relative;
                font-size: 14px;
                color: #333333;
            }
            .border1 {
                border: 1px solid #e3e3e3;
                padding: 7px 12px;
                box-sizing: border-box;
                display: inline-block !important;
                width: fit-content;
            }
        }
    }
    .inform-cop {
        .coupon-checked {
            padding-top: 20px;
            span {
                height: 30px;
                padding: 0 20px;
                border-top: 1px solid #df3033;
                border-bottom: 1px solid #df3033;
                background: #ffdedf;
                font-size: 14px;
                color: #333;
                position: relative;
                s,
                b {
                    position: absolute;
                    top: -1px;
                    bottom: -1px;
                    display: block;
                    width: 2px;
                    overflow: hidden;
                    background: url("../../assets/img/bg-coupon-lr.gif")
                        no-repeat;
                    background-size: 4px 100%;
                }
                s {
                    left: 0;
                    background-position: -2px 0;
                }
                b {
                    right: -2px;
                }
            }
        }
        .tit {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
        }
        .btn {
            margin-top: 10px;
            font-size: 14px;
            color: #666666;
        }
    }
    .inform-int {
        .tit {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
        }
        .check {
            margin-top: 16px;
            img {
                display: block;
                width: 16px;
                height: 16px;
            }
            .el-checkbox__input {
                display: none;
            }
            .el-checkbox__input.is-checked + .el-checkbox__label {
                color: #da213d;
            }
            .user-num {
                padding-left: 40px;
                color: #014a97;
                font-size: 14px;
                b {
                    font-size: 16px;
                }
            }
        }
        .input {
            margin-top: 16px;
            display: flex;
            height: 40px;
            align-items: center;
            input {
                width: 324px;
                height: 40px;
                border-radius: 2px;
                background-color: rgba(248, 248, 248, 1);
                padding-left: 10px;
            }
            ::placeholder {
                color: #999999;
            }
        }
    }
    .inform-order {
        > div:nth-of-type(1) {
            font-size: 18px;
            color: #666666;
            font-weight: 600;
        }
        textarea {
            width: 100%;
            height: 112px;
            background-color: rgba(248, 248, 248, 1);
            margin-top: 25px;
            border: none;
            padding: 15px 0 0 20px;
            box-sizing: border-box;
        }
        ::placeholder {
            color: #999999;
            font-size: 14px;
        }
    }
    .money {
        width: 100%;
        text-align: right;
        margin: 60px 0 32px 0;
        .top {
            width: 100%;
            display: flex;
            height: 24px;
            align-items: center;
            justify-content: flex-end;
            > div:nth-child(1) {
                color: #666666;
                font-size: 18px;
            }
            > div:nth-child(2) {
                padding-left: 33px;
                font-size: 18px;
                color: #333333;
                margin-right: 60px;
            }
        }
        .bot {
            display: flex;
            height: 24px;
            align-items: center;
            margin-top: 32px;
            justify-content: flex-end;
            margin-right: 60px;
            > div:nth-child(1) {
                color: #333333;
                font-size: 18px;
            }
            > div:nth-child(2) {
                padding-left: 33px;
                font-size: 18px;
                color: #333333;
                font-weight: 600;
            }
        }
    }
    .pay-money {
        width: 100%;
        height: 63px;
        background-color: rgba(243, 243, 243, 1);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        > div:nth-child(1) {
            font-size: 16px;
            color: #666666;
        }
        > div:nth-child(2) {
            font-weight: bold;
            font-size: 24px;
            color: $color;
            margin-left: 33px;
            padding-right: 46px;
        }
    }
    .pay {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        > div {
            width: 234px;
            height: 57px;
            line-height: 57px;
            text-align: center;
            border-radius: 2px;
            background-color: $color;
            color: #014a97;
            font-size: 18px;
            border-radius: 5px;
            font-weight: 600;
            margin-top: 24px;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
            line-height: 57px;
        }
    }
}

input[type="checkBox"] {
    /*去除浏览器默认样式*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /*自定义样式*/
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    border: 1px solid $color;
    outline: none;
    cursor: pointer;
}

input[type="checkBox"]:after {
    content: "√";
    position: absolute;
    padding-top: 1px;
    padding-left: 3px;
    font-weight: bolder;
    font-size: 15px;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: $color;
    color: #014a97;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all ease-in-out 300ms;
    -moz-transition: all ease-in-out 300ms;
    transition: all ease-in-out 300ms;
}

input[type="checkBox"]:checked:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

input,
textarea {
    outline: none;
    border: none;
}

.cart-top {
    height: 46px;
    padding: 0 20px;
    margin-top: 20px;
    height: 46px;
    background: #fbf7f7;
    border: 1px solid #eaa090;
    div {
        height: 46px;
        font-size: 14px;
        font-weight: bold;
        color: #999999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .cart-td1 {
        flex: 1;
    }
    .cart-td2 {
        width: 160px;
    }
    .cart-td3 {
        width: 260px;
    }
    .cart-td4 {
        width: 100px;
    }
}

.cart-list {
    margin-top: 24px;
    li {
        border: solid #dbdbdb 1px;
        padding: 0 20px;
        height: 150px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        .cart-td1 {
            flex: 1;
        }
        .cart-td2 {
            width: 160px;
        }
        .cart-td3 {
            width: 260px;
        }
        .cart-td4 {
            width: 100px;
        }
        .icon-checked {
            height: 20px;
            width: 20px;
            object-fit: contain;
        }
        .goods-img {
            display: block;
            width: 100px;
            height: 100px;
            object-fit: cover;
            margin-left: 20px;
        }
        .goods-info {
            height: 100px;
            margin-left: 20px;
            padding-right: 30px;
        }
        .name {
            font-size: 16px;
            line-height: 1.6;
            font-weight: bold;
            color: #333333;
            padding-top: 10px;
        }
        .price {
            display: none;
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
        }
        .goods-attr {
            font-size: 14px;
            color: #999999;
            font-weight: bold;
        }
        .edit-btn {
            width: 48px;
            height: 24px;
            border-radius: 2px;
            font-size: 14px;
            background-color: #da213d;
            color: #014a97;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .amount {
            font-size: 16px;
            font-weight: 700;
            color: #da213d;
        }
    }
}
.show-more {
    margin-top: 20px;
    span {
        font-size: 14px;
    }
    b {
        display: block;
        width: 10px;
        height: 9px;
        background: url("../../assets/img/icon_addr.png") no-repeat 0 0;
        margin-left: 5px;
    }
    b.on {
        background-position: 0 -9px;
    }
    .add-btn {
        color: #da213d;
        margin-left: 20px;
    }
}
.pay-box {
    padding-top: 20px;
    .label {
        min-width: 120px;
        padding: 0 20px;
        height: 46px;
        margin-right: 20px;
        border: solid #dbdbdb 1px;
        border-radius: 2px;
        background-color: #fff;
        cursor: pointer;
        img {
            display: block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        span {
            font-size: 16px;
            color: #666;
        }
        .yue-num {
            font-size: 13px;
            padding-top: 5px;
            padding-left: 5px;
        }
    }
    .label:hover {
        border-color: $color;
    }
    .active {
        border-color: $color;
        position: relative;
    }
    .active:after {
        content: "";
        display: block;
        position: absolute;
        bottom: -1px;
        right: -1px;
        width: 18px;
        height: 18px;
        background: url("../../assets/pay/icon_selected.png") right bottom;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
.line {
    width: 1200px;
    margin: 0 auto 30px;
    img {
        display: block;
        width: 100%;
    }
}
.deli-method {
    display: flex;
    margin-top: 30px;
    margin-bottom: 40px;
    div {
        width: 190px;
        height: 60px;
        border: 1px solid #eaa090;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #333333;
        line-height: 60px;
        margin-right: 50px;
    }
    .this {
        width: 190px;
        height: 60px;
        background: #fbf7f7;
        border: 1px solid #eaa090;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: #da213d;
        line-height: 60px;
    }
}
.btn-choose {
    display: flex;
    margin: 50px auto;
    justify-content: center;
    .succ {
        width: 270px;
        height: 44px;
        background: #45b39c;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        cursor: pointer;
    }
    .succ-pay {
        width: 270px;
        height: 44px;
        background: #3ca9d7;
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        margin-right: 35px;
        margin-left: 35px;
        cursor: pointer;
    }
    .fail {
        width: 270px;
        height: 44px;
        background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
        border-radius: 5px;
        font-size: 16px;
        text-align: center;
        color: #ffffff;
        line-height: 44px;
        cursor: pointer;
    }
}
</style>
